<template>
  <!-- 主体信息 -->
  <div class="wrap">
    <!-- 用户基础信息 -->
    <div class="information">
      <!-- 用户信息部分 -->
      <div class="top">
        <!-- 个人头像昵称 -->
        <div class="user">
          <div class="userIco">
            <img src="../../assets/用户图片.webp" alt="">
          </div>
          <div class="name">{{ userInfo.name }}({{ userInfo.phone }})</div>
        </div>
        <!-- 收货地址等 -->
        <div class="option">
          <ul>
            <li><p @click="openFn" style="cursor: pointer">修改个人信息</p></li>
            <!-- 
            <li>我的收货地址</li>
            <li>我的订单</li> -->
          </ul>
        </div>
      </div>
      <!-- 代付款 -->
      <div class="bot">
        <ul>
          <li>代付款</li>
          <li>代发货</li>
          <li>待收货</li>
          <li>待评价</li>
          <li>退款</li>
        </ul>
      </div>
    </div>
    <!-- 我的物流 -->
    <div class="logistics">
      <!-- 物流导航 -->
      <div class="logistics_nav">
        <div class="ico">
          <i class="el-icon-truck"></i>
        </div>
        <p>我的物流</p>
      </div>
      <!-- 物流信息 -->
      <div class="logistics_mian" v-show="yes">
        <div class="left">
          <div class="img">
            <img src="../../assets/摄像头.png" alt="">
          </div>
          <div class="text">
            <div class="text_top">
              您的包裹由广州白云解放庄二巷4号店菜鸟驿站派送，如有问题可...
            </div>
            <div class="text_bot">2023-02-23 17:30:57 查看物流明细</div>
          </div>
        </div>
        <button @click="yesBtn">确认收货</button>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like">
      <div class="like_nav">
        <div class="text">根据浏览，猜我喜欢</div>
      </div>
      <!-- 猜你喜欢商品 -->
      <div class="hootprefec">
        <div class="boxList" v-loading="loading4">
          <div
            class="shopbox"
            v-for="item in hootprefec"
            :key="item.id"
            @click="ttt(item.id)"
          >
            <div class="imgbox">
              <img :src="item.s_goods_photos[0].path" alt="" />
            </div>
            <div class="text">
              <p>{{ item.name }}</p>
              <p>{{ item.desc }}</p>
              <p>¥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pop_up" v-show="mask_layer">
      <div class="modif_box">
        <div class="title">
          <p>修改信息</p>
          <span>请在想要修改的地方进行修改</span>
        </div>
        <!-- 新昵称 -->
        <div class="box">
          <span>新昵称</span>
          <div class="input_box">
            <input type="text" v-model="modf_name" placeholder="输入新昵称" />
          </div>
        </div>
        <!-- 新手机号 -->
        <div class="box">
          <span>新手机号</span>
          <div class="input_box">
            <input
              type="text"
              v-model="modf_phone"
              placeholder="输入新的手机号"
            />
          </div>
        </div>
        <!-- 新密码 -->
        <div class="box">
          <span>新密码</span>
          <div class="input_box">
            <el-input
              placeholder="请输入新密码"
              v-model="modf_password"
              show-password
            ></el-input>
          </div>
        </div>

        <div class="button_box" @click="TheUserFn(userInfo.id)">
          <el-button :plain="true">完成</el-button>
        </div>

        <div class="x" @click="offFn">
          <p>X</p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Navtop from "../../components/navtop";

import { Shopimg, getBanner } from "../../api/test";
// import oldUser from "../components/oldUser.vue";
import { getUserInfo, loginOut, userModif } from "../../api/test";
export default {
  props: {},
  data() {
    return {
      nowtime: "",
      day: "",
      week: "",
      year: "",
      modf_name: "",
      modf_phone: "",
      modf_password: "",
      loading4: true,
      userInfo: {},
      mask_layer: false,
      yes:true,
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 修改信息按钮
    openFn() {
      console.log(123);
      this.mask_layer = true;
    },
    offFn() {
      this.mask_layer = false;
    },
    async TheUserFn(id) {
      if (this.modf_name && this.modf_phone && this.modf_password) {
        await userModif(id, {
          name: this.modf_name,
          phone: this.modf_phone,
          password: this.modf_password,
        })
          .then((res) => {
            // console.log(res);
            this.$message({
              message: "修改成功",
              type: "success",
            });
            setTimeout(() => {
              location.reload();
            }, 1000);
          })
          .catch(() => {
            this.$message.error("昵称重复，请修改其他昵称");
          });
      } else {
        this.$message.error("修改失败，信息不能为空");
      }
    },

    ttt(item) {
      this.$router.push({ path: `/particulars/${item}` });
    },
    getNowDate() {
      let date = new Date();
      var year = new Date().getFullYear();
      var month = new Date().getMonth() + 1;
      this.day = new Date().getDate();
      this.year = year + "." + month;
      this.week = "星期" + "日一二三四五六".charAt(date.getDay());
      // console.log(this.nowtime)
    },
    // 确认收货
    yesBtn(){
      this.yes=false;
    }
  },
  async created() {
    //   console.log(this.$store.state.shopLeftNav);
    // console.log(JSON.parse(sessionStorage.getItem("shopClassify")));
    // console.log(this.$store.state.navTwoList);
    this.shopList = JSON.parse(sessionStorage.getItem("shopClassify"));
    // if (sessionStorage.getItem("shopImg")) {
    //   this.shopImg = JSON.parse(sessionStorage.getItem("shopImg"));
    //   this.loading = false;
    // } else {
    //   getBanner({
    //     site_id: 137,
    //     project_id: 98,
    //   }).then((res) => {
    //     sessionStorage.setItem("shopImg", JSON.stringify(res.data.result));
    //     this.shopImg = JSON.parse(sessionStorage.getItem("shopImg"));
    //     this.loading = false;
    //   });
    // }

    const reqList = [923, 930, 939, 952, 953];
    for (let id of reqList) {
      if (id == 923) {
        if (sessionStorage.getItem("classtop")) {
          this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
          this.loading2 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "classtop",
                JSON.stringify(res.data.result.rows)
              );
              this.classtop = JSON.parse(sessionStorage.getItem("classtop"));
              this.loading2 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 930) {
        if (sessionStorage.getItem("swiperimg")) {
          this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
          this.loading3 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swiperimg",
                JSON.stringify(res.data.result.rows)
              );
              this.swiperimg = JSON.parse(sessionStorage.getItem("swiperimg"));
              this.loading3 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 939) {
        if (sessionStorage.getItem("swipertop")) {
          this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
          this.loading4 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "swipertop",
                JSON.stringify(res.data.result.rows)
              );
              this.swipertop = JSON.parse(sessionStorage.getItem("swipertop"));
              this.loading4 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 952) {
        if (sessionStorage.getItem("hootprefec")) {
          this.hootprefec = JSON.parse(sessionStorage.getItem("hootprefec"));
          this.loading5 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "hootprefec",
                JSON.stringify(res.data.result.rows)
              );
              this.hootprefec = JSON.parse(
                sessionStorage.getItem("hootprefec")
              );
              this.loading5 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
      if (id == 953) {
        if (sessionStorage.getItem("boutphone")) {
          this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
          this.loading6 = false;
        } else {
          Shopimg({
            project_id: 149,
            classify_id: id,
          })
            .then((res) => {
              sessionStorage.setItem(
                "boutphone",
                JSON.stringify(res.data.result.rows)
              );
              this.boutphone = JSON.parse(sessionStorage.getItem("boutphone"));
              this.loading6 = false;
            })
            .catch((err) => {
              this.$message({
                message: "页面错误，请重新刷新页面",
                type: "warning",
              });
            });
        }
      }
    }

    // 获取用户信息
    let res = await getUserInfo({});
    // console.log(res);
    this.userInfo = res.data.result;
    this.modf_name = res.data.result.name;
    this.modf_phone = res.data.result.phone;
    this.modf_password = res.data.result.password;

    this.phone = this.userInfo.phone.split("");
    // console.log(this.phone);
    this.phone.forEach((item, index) => {
      if (index >= 3 && index <= 6) {
        this.phone[index] = "*";
      }
    });
    // console.log(this.phone);
    this.phone = this.phone.join("");
  },
  mounted() {
    this.getNowDate();
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  .information {
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    border: 1px solid #e5eaee;
    .top {
      width: 100%;
      height: 60%;
      display: flex;
      box-sizing: border-box;
      background-color: #f6f8fa;
      border: 1px solid #e5eaee;
      .user {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        .userIco {
          width: 18%;
          height: 80%;
          margin-left: 15px;
          border-radius: 50%;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .name {
          font-size: 15px;
          margin-left: 5px;
        }
      }
      .option {
        width: 50%;
        height: 100%;
        ul {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          li {
            color: grey;
            font-size: 15px;
          }
        }
      }
    }
    .bot {
      width: 100%;
      height: 40%;
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        li {
          font-size: 5px;
          border-right: 1px solid black;
          line-height: normal;
          padding: 0 50px;
          cursor:pointer;
          &:nth-of-type(5) {
            border: none;
          }
        }
      }
    }
  }
  // 我的物流
  .logistics {
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    border: 1px solid #e5eaee;
    // 物流导航
    .logistics_nav {
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      background-color: #f6f8fa;
      border: 1px solid #e5eaee;
      .ico {
        font-size: 30px;
        margin: 0px 10px;
        color: gray;
      }
    }
    // 物流信息
    .logistics_mian {
      width: 100%;
      height: 70%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .img {
          width: 15%;
          height: 70px;
          display: block;
          margin: 10px 0;
        }
        .text {
          height: 40%;
          font-size: 5px;
          text-align: start;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      button {
        width: 10%;
        height: 30%;
        cursor:pointer;
        margin-right: 40px;
        font-size: 5px;
        padding: 5px;
        background-color: #ffffff;
        border: 1px solid gray;
        color: gray;
      }
    }
  }
  .like {
    width: 100%;
    height: 650px;
    margin-top: 20px;
    border: 1px solid #e5eaee;
    .like_nav {
      width: 100%;
      height: 50px;
      padding: 0px 10px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: skyblue;
      .text {
        font-size: 20px;
        color: #ffffff;
      }
      .btn {
        width: 100px;
        height: 30px;
        font-size: 15px;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        i {
          margin: 0px 5px;
        }
      }
    }
    .hootprefec {
      width: 100%;
      .boxList {
        display: flex;
        justify-content: space-between;
        .shopbox {
          display: flex;
          flex-direction: column;
          margin-top: 30px;
          width: 395px;
          height: 440px;
          background-color: #fff;
          padding-top: 80px;
          transition: all 0.3s;
          .imgbox {
            height: 290px;
            img {
              width: 230px;
              height: 230px;
              margin: 0 auto;
            }
          }

          .text {
            flex: 1;
            p:first-child {
              font-size: 18px;
              margin-bottom: 20px;
            }
            p:nth-child(2) {
              font-size: 12px;
              margin-bottom: 20px;
            }
            p:nth-child(3) {
              font-size: 16px;
              color: red;
              font-weight: 500;
            }
          }
        }

        .shopbox:hover {
          box-shadow: 0 3px 15px gray;
          transform: translateY(-2px);
        }
      }
    }
  }
  .pop_up {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(130, 127, 127, 0.4);

    .modif_box {
      position: relative;
      margin: 0 auto;
      width: 490px;
      height: 540px;
      background-color: #fff;
      transform: translateY(25%);

      .title {
        padding-top: 40px;
        p {
          font-size: 20px;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }

      .box {
        display: flex;
        flex-direction: column;
        padding: 0 15%;
        margin-top: 30px;

        span {
          font-size: 16px;
          text-align: left;
        }

        .input_box {
          margin-top: 10px;
          width: 100%;
          input {
            width: 100%;
            height: 40px;
            //   border-color: #000;
            border: 1px solid #dcdfe6;
            padding: 0 15px;
            color: #606266;
            border-radius: 4px;
            box-sizing: border-box;
          }
        }
      }

      .button_box {
        padding: 0 15%;
        margin-top: 40px;
        button {
          background-color: #456fff;
          width: 100%;
          height: 40px;
          border: none;
          color: #fff;
        }
      }

      .x {
        position: absolute;
        top: 10px;
        right: 25px;
        cursor: pointer;
        p {
          font-size: 30px;
          color: #dcdfe6;
        }
      }
    }
  }
}
</style>